// @ts-nocheck
import React, { Component } from 'react';
import PubSub from 'pubsub-js';
import './index.css'

class List extends Component {

  state = {
    users: [],
    isFirst: true,
    isLoading: false,
    err: ''
  }

  componentDidMount () {
    PubSub.subscribe ('atguigu', (msg, stateObj) => {
      this.setState (stateObj)
    })
  }

  render() {
    const {users, isFirst, isLoading, err} = this.state
    return (
      <div className="row">
        {
          // 表达式 不能写if
          isFirst? <h2>欢迎使用</h2> :
          isLoading? <h2>Loading....</h2> :
          err? <h2>{err}</h2> :
          
          users.map((userObj) => {
            return (
              <div className="card" key={userObj.id}>
                <a href={userObj.html_url} target="_blank" rel="noreferrer">
                  <img alt='pic' src={userObj.avatar_url} style={{ width: '100px' }} />
                </a>
                <p className="card-text">{userObj.login}</p>
              </div>
            )
          })
        }
      </div>
    );
  }
}

export default List;
